<template>
    <div class="tab">
        <ul class="tabs">

            <!-- 底部菜单栏的展示 -->
            <li @click="light = 1">
            <!-- 路由线路跳转到相应的页面 -->
                <router-link to="/" :class="[{ active: light == 1 }, 'ico']">首页</router-link>
            </li>
            <li @click="light = 2">
                <router-link to="/video" :class="[{ active: light == 2 }, 'ico']">视频</router-link>
            </li>
            <li @click="light = 3">
                <router-link to="activity" :class="[{ active: light == 3 }, 'ico']">活动</router-link>
            </li>
            <li @click="light = 4">
                <router-link to="collect" :class="[{ active: light == 4 }, 'ico']">收藏</router-link>
            </li>


        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            light: 1,
        };
    },
};
</script>

<style scoped>
.tab {
    width: 100%;
    background-color: black;
    position: fixed;
    bottom: 0;
    height: 6vh;
    line-height: 6vh;
    text-align: center;
    z-index: 999;
}
.tab .tabs {
    width: 100%;
    /* 固定 */
    display: flex;
}
.tab .tabs li {
    flex: 1;
}
.tab .tabs li a.active {
    background-color: plum;
    color: aqua;
}
.tab .tabs li .ico {
    display: block;
}
</style>
